<template>
    <div>
        
        <!-- 添加，修改 -->
        <el-dialog :title="this.pojo.id==null?'添加页面':'修改页面'" :visible.sync="dialogFormVisible">
  <el-form :model="pojo">
    <el-form-item label="标签名称" :label-width="formLabelWidth">
      <el-input v-model="pojo.name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="add()">确 定</el-button>

  </div>


</el-dialog>


        <!-- 模糊查询 -->
        <el-form ref="form" :model="form" label-width="80px" >
  <el-form-item label="标签名称"  >
    <el-input v-model="form.name"  ></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="findAll()">查询</el-button>
    <el-button>取消</el-button>
    <el-button type="primary" @click="toadd()">添加</el-button>
  </el-form-item>
</el-form>


         <!-- 查所有 -->
    <el-table :data="tableData" style="width: 100%">
       <el-table-column  prop="id"  label="ID" > </el-table-column>
    <el-table-column prop="name"  label="标签名" >  </el-table-column>
    <el-table-column  prop="userId"  label="添加人" > </el-table-column>
    <el-table-column  prop="updateTime"  label="更改时间" > </el-table-column>
    <el-table-column prop="status" label="使用状态" width="120px">
        <template slot-scope="scope">
            <el-tooltip :content="scope.row.status">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="2"
            >
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
    
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button   @click="toupdate(scope.row)" type="text"  size="small">编辑</el-button>
        <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
  
      </template>
    </el-table-column>
  </el-table> 
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageNum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="total">
    </el-pagination>

    </div>
</template>

    <script>
    import axios from 'axios';
        export default {
            data() {
                return {
                    tableData:[],
                    pageNum:1,
                    pageSize:2,
                    total:0,
                    form:{},
                    pojo:{},
                    dialogFormVisible:false,
                       
                }
            },
            methods:{
                del(id){
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                         axios.get(`http://localhost:8088/biaoqian/del/?id=${id}`).then(res=>{
                        if(res.data>=0){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.findAll();
                        }
                            })
                        }).catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消删除'
                      });  
                    })  
                },
                toupdate(row){
                    this.dialogFormVisible=true
                    this.pojo=row    
                },
                add(){
                    axios.post(`http://localhost:8088/biaoqian/add`,this.pojo).then(res=>{
                        if(res.data>=0){
                            this.$message({
                                message: this.pojo.id==null?'添加成功':'修改成功',
                                type: 'success'
                            });
                        }else{
                            this.$message.error( this.pojo.id==null?'添加失败':'修改失败')
                        }
                        this.findAll();
                        this.dialogFormVisible=false;
                    })
                },
                toadd(){
                    this.dialogFormVisible=true
                    this.pojo={}
                },
                findAll(){
            axios.post(`http://localhost:8088/biaoqian/findAll?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.form).then(res=>{
                this.tableData = res.data.records;
                this.total = res.data.total;
            })
        },

        handleSizeChange(val) {
          this.pageSize = val;
          this.findAll();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.findAll();
        console.log(`当前页: ${val}`);
      }
            },
            created() {
             this.findAll();   
            }
        }
</script>
